<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单元素标签</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        form{
            height: 300px;
            width: 300px;
            border: 1px solid red;
            margin: auto;
        }
    </style>
</head>
<body>
    <!-- 
        form 用于在页面中划分一个区域来存放表单元素
        在这个区域表单元素会自动收集表单元素的信息，辅助提交给服务器
        action:用于指定服务器地址
     -->
     <form action="https://www.bilibili.com/?spm_id_from=333.337.0.0" target="_blank" method="post">
        <!-- 表单元素 
            作用：收集用户信息
            input 是一个行内块元素
            收集的信息有很多分类，对应就有多种的表单元素,其中使用最多的一个表单元素：input
            type 决定表单元素的类型
            name 设置表单元素提交数据的名称
            value 表示用户输入信息的内容
        -->
        <input type="text" name="age" value="昵称："><br>
        <!-- <input type="text" name="account" value="账号："><br>
        <input type="text" name="password" value="密码："><br>
        <input type="text" name="captcha" value="验证码："> -->
        <!-- password收集密码信息 收集方式和text一致，但是他会对文字进行加密处理 -->
        <input type="password" name="pwd" value=""><br>
        <!-- 数字输入框，只能输入数字信息 
            step输入数字步长 默认是1，一次增加1
            min 设置最小值
            max 设置最大值
        -->
        <input type="number" name="num" step="10" min="10" max="100" id=""><br>
        <!-- range 本质也是一个数字输入框 -->
        <input type="range" name="" id=""><br>
        <!-- data 日期输入框 复合型日期输入框 包含年月日 -->
        <input type="date" name="" id=""><br>
        <!--  -->
        <input type="week" name="" id=""><br>
        <!--  -->
        <input type="time" name="" id=""><br>
        <!--  -->
        <input type="datetime-local" name="" id=""><br>
        <!-- color 颜色收集框，手机颜色以16进制的形式收集 -->
        <input type="color" name="" id=""><br>
        <!-- file 提交文件 默认是提交单个文件 multiple 属性表示提交多个 -->
        <input type="file" name="" multiple id=""><br>
        <!-- 
            文本域 textarea 标签
            cols 列宽
            rows 行高
         -->
         <textarea name="" id="" rows="2" cols="30"></textarea><br>

         <!-- 提交按钮 -->
         <input type="submit" value="提交">
     </form>
</body>
</html>